<template>
  <div class="app-container home">
    <!--  第一行  -->
    <el-row :gutter="20">
      <!--  公告通知  -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>官方公告</span>
          </div>
          <div class="body" style="height: 186px">
            <table>
              <tr style="height: 30px;" v-for="(item,i) in noticeList">
                <td class="ggtab">
                  <dict-tag :options="dict.type.sys_notice_type" :value="item.noticeType"/>
                </td>
                <td><div class="gg content text-ellipsis" @click="openNotice(item)">{{ item.noticeTitle }}</div></td>
                <td class="ggtime text-ellipsis">{{item.createTime}}</td>
              </tr>
            </table>
          </div>
        </el-card>
      </el-col>
      <!--  对接流程    -->
      <el-col :xs="24" :sm="24" :md="12" :lg="10">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>对接流程</span>
          </div>
          <div class="body" style="height: 176px">
            <p style="margin-bottom: 18px;">
              <b>使用流程</b> 购买套餐 => 配置账户 => 创建应用 => 接口对接
            </p>
            <p style="margin-bottom: 18px;">
              <b>购买套餐</b> 用户中心 => 商品订购 => 下单
            </p>
            <p style="margin-bottom: 18px;">
              <b>配置账户</b> 用户中心 => 基础配置 => 立即配置 => 上传微信/支付宝收款码
            </p>
            <p style="margin-bottom: 18px;">
              <b>创建应用</b> 用户中心 => 应用管理 => 创建应用 => 填写相关信息 => 保存完成配置
            </p>
            <p style="margin-bottom: 18px;">
              <b>接口对接</b> 依照接口文档进行对接，或者使用官方提供的SDK进行对接
            </p>
          </div>
        </el-card>
      </el-col>
      <!--  案例    -->
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>Demo 案例</span>
          </div>
          <div class="body" style="height: 176px">

            <p>
              <el-link href="http://pay.uvstu.com/demo/java_demo.zip" target="_blank">
                <i class="el-icon-s-promotion"></i> JAVA 案例
              </el-link>
            </p>
            <p>
              <el-link href="http://pay.uvstu.com/demo/php_demo.zip" target="_blank">
                <i class="el-icon-s-promotion"></i> PHP 案例
              </el-link>
            </p>
            <p>
              <el-link href="#" target="_blank">
                <i class="el-icon-s-promotion"></i> C# 案例
              </el-link>
            </p>
            <p>
              <el-link href="#" target="_blank">
                <i class="el-icon-s-promotion"></i> Python 案例
              </el-link>
            </p>
            <p>
              <el-link href="#" target="_blank">
                <i class="el-icon-s-promotion"></i> 易语言 案例
              </el-link>
            </p>

          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">

      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <h2>使用说明</h2>
        <el-collapse v-model="systemNames">

          <el-collapse-item title="一、平台说明" name="1">
            <p>1、本平台主要是为<span style="color: red">个人开发者、个体商户</span>提供免签支付业务，如需平台程序或源码授权可以参考下方授权说明。</p>
            <p>2、使用本平台开发是需要配置结算账户，支持支付宝和微信收款二维码。</p>
            <p>3、平台是<span style="color: red">次日结算</span>用户收款金额，费用于<span style="color: red">次日</span> 08:00 - 12:00 会陆续到账。</p>
            <p>4、关于用户退款接口问题，<span style="color: red">次日订单</span>不给予退款操作，如有需要可以联系客服。</p>
            <p>5、微信退款是全额退还，支付宝退款会扣除其官方手续费。</p>
            <p><span style="color: red">6、不允许任何违法国家法律法规的平台对接，如发现平台有权强行中断对该用户的服务。</span></p>
          </el-collapse-item>
          <el-collapse-item title="二、软件授权" name="2">

            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 20%">规格名称</th>
                <th style="width: 10%">商业授权</th>
                <th style="width: 10%">更新服务</th>
                <th style="width: 10%">源码提供</th>
                <th style="width: 10%">技术支持</th>
                <th style="width: 10%">商品价格</th>
                <th style="width: 30%">备注</th>
              </tr>
              <tr style="height: 30px">
                <td>规格一</td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: red">X</b></td>
                <td><b style="color: red">X</b></td>
                <td><b style="color: red">X</b></td>
                <td>499元</td>
                <td><span style="cursor: pointer;" @click="addQqQun()">详细咨询</span></td>
              </tr>
              <tr style="height: 30px">
                <td>规格二</td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: red">X</b></td>
                <td><b style="color: red">X</b></td>
                <td>1899元</td>
                <td><span style="cursor: pointer;" @click="addQqQun()">详细咨询</span></td>
              </tr>
              <tr style="height: 30px">
                <td>规格三</td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: red">X</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: red">X</b></td>
                <td>3899元</td>
                <td><span style="cursor: pointer;" @click="addQqQun()">详细咨询</span></td>
              </tr>
              <tr style="height: 30px">
                <td>规格四</td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: red">X</b></td>
                <td>5899元</td>
                <td><span style="cursor: pointer;" @click="addQqQun()">详细咨询</span></td>
              </tr>
              <tr style="height: 30px">
                <td>规格五</td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td><b style="color: green">√</b></td>
                <td>6899元</td>
                <td><span style="cursor: pointer;" @click="addQqQun()">详细咨询</span></td>
              </tr>
            </table>

          </el-collapse-item>

        </el-collapse>

      </el-col>

      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <br />
        <br />
        <h2>接口文档</h2>
        <p>
          本文档涉及了 签名规则、订单支付接口、订单查询接口、订单退款接口、支付结果通知、退款结果通知。
        </p>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="一、签名规则" name="1">
              <br />
              用户创建应用后，系统会自动生成签名key，签名加密的时候需要加入应用生成的签名key，
              不同的应用签名key不一样。本平台的签名统一使用<b style="color:orangered;">MD5加密</b>进行签名，签名规则为
              <b style="color:orangered;">MD5(签名key+请求参数+签名Key)</b>
            <p>案例如下:</p>
            <div style="background-color: #eeeeee;width: 100%;height: 90px;padding: 10px">
              参数JSON：{"outTradeNo":"1234567890","goodName:":"商品兑换券","price":0.01}<br />
              签名KEY：12345678901234567890123456789012<br />
              加密数据拼接：12345678901234567890123456789012{"outTradeNo":"1234567890","goodName:":"商品兑换券","price":0.01}12345678901234567890123456789012
            </div>
            <p>
              将以上加密数据拼接结果进行<b style="color:orangered;">MD5加密</b>即可<b style="color:orangered;">生成签名</b>
            </p>
            <p>签名结果：3928173ab21128aa11cc225560594a12</p>

          </el-collapse-item>
          <el-collapse-item title="二、订单支付接口" name="2">
            <br />
            支付接口目前只提供 支付宝扫码支付、微信扫码支付 2种支付方式，支付时需要传递头部参数和请求参数
            <br />
            <p><b>请求说明</b></p>
            <p>请求地址：http://pay.uvstu.com:8090/open/api/pay</p>
            <p>请求类型：Post</p>
            <p><b>Header</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>创建应用是生成的应用ID</p>
                  <p>可在 应用管理=>配置 查询到应用ID</p>
                </td>
              </tr>
              <tr>
                <td>sign</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>3928173ab21128aa11cc225560594a12</td>
                <td>
                  <p>按照签名规则进行生成</p>
                </td>
              </tr>
              <tr>
                <td>type</td>
                <td>整数型</td>
                <td>1</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>目前只支持 支付宝支付、微信支付 2种支付方式</p>
                  <p>1-支付宝支付 2-微信支付</p>
                </td>
              </tr>
              <tr>
                <td>channel</td>
                <td>整数型</td>
                <td>1</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>type=1 参数：1-支付宝扫码支付 2-支付宝收银台支付</p>
                  <p>type=2 参数：1-微信扫码支付</p>
                </td>
              </tr>
            </table>
            <p><b>Body</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>36</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户平台订单号,该商户订单号唯一</p>
                </td>
              </tr>
              <tr>
                <td>price</td>
                <td>字符型</td>
                <td>10</td>
                <td>是</td>
                <td>0.01</td>
                <td>
                  <p>商品价格，单位：元</p>
                </td>
              </tr>
              <tr>
                <td>goodName</td>
                <td>字符型</td>
                <td>20</td>
                <td>是</td>
                <td>点券充值卡</td>
                <td>
                  <p>商品名称</p>
                </td>
              </tr>
            </table>
            <p><b>响应参数</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>code</td>
                <td>整数型</td>
                <td>是</td>
                <td>200</td>
                <td>
                  <p>成功：200 失败：500</p>
                </td>
              </tr>
              <tr>
                <td>message</td>
                <td>字符型</td>
                <td>是</td>
                <td>操作成功</td>
                <td>
                  <p>返回信息描述，包括错误信息描述</p>
                </td>
              </tr>
              <tr>
                <td>isSucceed</td>
                <td>布尔型</td>
                <td>是</td>
                <td>true</td>
                <td>
                  <p>业务是否请求成功，成功：true 失败：false</p>
                </td>
              </tr>
              <tr>
                <td>data</td>
                <td>字符型</td>
                <td>是</td>
                <td>无</td>
                <td>
                  <p>支付宝、微信支付链接</p>
                  <p>支付宝扫码支付：支付地址，需要自行生成二维码后扫码支付</p>
                  <p>支付宝收银台支付：将返回数据直接输出到页面，即可生成付款页面</p>
                  <p>微信扫码支付：支付地址，需要自行生成二维码后扫码支付</p>
                </td>
              </tr>
            </table>

          </el-collapse-item>
          <el-collapse-item title="三、订单查询接口" name="3">
            <br />
            支付订单查询 和 退款订单查询 通用的订单查询接口
            <br />
            <p><b>请求说明</b></p>
            <p>请求地址：http://pay.uvstu.com:8090/open/api/query</p>
            <p>请求类型：Post</p>
            <p><b>Header</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>创建应用是生成的应用ID</p>
                  <p>可在 应用管理=>配置 查询到应用ID</p>
                </td>
              </tr>
              <tr>
                <td>sign</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>3928173ab21128aa11cc225560594a12</td>
                <td>
                  <p>按照签名规则进行生成</p>
                </td>
              </tr>
            </table>

            <p><b>Body</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>36</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户平台订单号,该商户订单号唯一</p>
                </td>
              </tr>
            </table>

            <p><b>响应参数</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>code</td>
                <td>整数型</td>
                <td>是</td>
                <td>200</td>
                <td>
                  <p>成功：200 失败：500</p>
                </td>
              </tr>
              <tr>
                <td>message</td>
                <td>字符型</td>
                <td>是</td>
                <td>操作成功</td>
                <td>
                  <p>返回信息描述，包括错误信息描述</p>
                </td>
              </tr>
              <tr>
                <td>isSucceed</td>
                <td>布尔型</td>
                <td>是</td>
                <td>true</td>
                <td>
                  <p>业务是否请求成功，成功：true 失败：false</p>
                </td>
              </tr>
              <tr>
                <td>data</td>
                <td>字符型</td>
                <td>是</td>
                <td>无</td>
                <td>
                  <p>订单数据</p>
                </td>
              </tr>
            </table>

            <p><b>订单数据</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>应用ID</p>
                </td>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户订单号</p>
                </td>
              </tr>
              <tr>
                <td>tradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>4200001754202302112022559676</td>
                <td>
                  <p>第三方订单号</p>
                </td>
              </tr>
              <tr>
                <td>refundNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>50302204492023021130947235042</td>
                <td>
                  <p>第三方退款单号</p>
                </td>
              </tr>
              <tr>
                <td>goodName</td>
                <td>字符型</td>
                <td>是</td>
                <td>点券充值卡</td>
                <td>
                  <p>商品名称</p>
                </td>
              </tr>
              <tr>
                <td>payMethod</td>
                <td>字符型</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>支付方式 1-支付宝 2-微信</p>
                </td>
              </tr>
              <tr>
                <td>price</td>
                <td>字符型</td>
                <td>是</td>
                <td>0.01</td>
                <td>
                  <p>订单价格 单位：元</p>
                </td>
              </tr>
              <tr>
                <td>transactionTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:55:01</td>
                <td>
                  <p>交易时间</p>
                </td>
              </tr>
              <tr>
                <td>refundTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:56:01</td>
                <td>
                  <p>退款时间</p>
                </td>
              </tr>
              <tr>
                <td>status</td>
                <td>整数型</td>
                <td>是</td>
                <td>2</td>
                <td>
                  <p>订单状态 1-待支付 2-支付成功 3-支付失败 4-待退款中 5-退款成功</p>
                </td>
              </tr>
              <tr>
                <td>createTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:54:01</td>
                <td>
                  <p>创建时间</p>
                </td>
              </tr>
            </table>

          </el-collapse-item>
          <el-collapse-item title="四、订单退款接口" name="4">
            <br />
            支付接口目前只提供 支付宝扫码支付、微信扫码支付 2种支付方式，支付时需要传递头部参数和请求参数
            <br />
            <p><b>请求说明</b></p>
            <p>请求地址：http://pay.uvstu.com:8090/open/api/refund</p>
            <p>请求类型：Post</p>
            <p><b>Header</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>创建应用是生成的应用ID</p>
                  <p>可在 应用管理=>配置 查询到应用ID</p>
                </td>
              </tr>
              <tr>
                <td>sign</td>
                <td>字符型</td>
                <td>32</td>
                <td>是</td>
                <td>3928173ab21128aa11cc225560594a12</td>
                <td>
                  <p>按照签名规则进行生成</p>
                </td>
              </tr>
              <tr>
                <td>type</td>
                <td>整数型</td>
                <td>1</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>目前只支持 支付宝扫码支付、微信扫码支付 2种支付方式</p>
                  <p>1-支付宝扫码支付 2-微信扫码支付</p>
                </td>
              </tr>
            </table>
            <p><b>Body</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">长度</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 49%">参数说明</th>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>36</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户平台订单号,该商户订单号唯一</p>
                </td>
              </tr>
              <tr>
                <td>refundReason</td>
                <td>字符型</td>
                <td>10</td>
                <td>否</td>
                <td>全额退款</td>
                <td>
                  <p>退款原因</p>
                </td>
              </tr>
            </table>
            <p><b>响应参数</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>code</td>
                <td>整数型</td>
                <td>是</td>
                <td>200</td>
                <td>
                  <p>成功：200 失败：500</p>
                </td>
              </tr>
              <tr>
                <td>message</td>
                <td>字符型</td>
                <td>是</td>
                <td>操作成功</td>
                <td>
                  <p>返回信息描述，包括错误信息描述</p>
                </td>
              </tr>
              <tr>
                <td>isSucceed</td>
                <td>布尔型</td>
                <td>是</td>
                <td>true</td>
                <td>
                  <p>业务是否请求成功，成功：true 失败：false</p>
                </td>
              </tr>
              <tr>
                <td>data</td>
                <td>字符型</td>
                <td>是</td>
                <td>无</td>
                <td>
                  <p>退款订单数据</p>
                </td>
              </tr>
            </table>
          </el-collapse-item>
          <el-collapse-item title="五、支付结果通知" name="5">
            <br />
            支付结果通知是由用户提供的接口，主要是用于支付结果的通知，在创建应用时会进行配置支付异步通知地址
            <br />
            <p><b>请求说明</b></p>
            <p>请求地址：用户应用内配置</p>
            <p>请求类型：Post</p>
            <p>请求参数：json字符串</p>
            <p><b>通知参数示例</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>应用ID</p>
                </td>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户订单号</p>
                </td>
              </tr>
              <tr>
                <td>tradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>4200001754202302112022559676</td>
                <td>
                  <p>第三方订单号</p>
                </td>
              </tr>
              <tr>
                <td>refundNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>50302204492023021130947235042</td>
                <td>
                  <p>第三方退款单号</p>
                </td>
              </tr>
              <tr>
                <td>goodName</td>
                <td>字符型</td>
                <td>是</td>
                <td>点券充值卡</td>
                <td>
                  <p>商品名称</p>
                </td>
              </tr>
              <tr>
                <td>payMethod</td>
                <td>字符型</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>支付方式 1-支付宝 2-微信</p>
                </td>
              </tr>
              <tr>
                <td>price</td>
                <td>字符型</td>
                <td>是</td>
                <td>0.01</td>
                <td>
                  <p>订单价格 单位：元</p>
                </td>
              </tr>
              <tr>
                <td>transactionTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:55:01</td>
                <td>
                  <p>交易时间</p>
                </td>
              </tr>
              <tr>
                <td>refundTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:56:01</td>
                <td>
                  <p>退款时间</p>
                </td>
              </tr>
              <tr>
                <td>status</td>
                <td>整数型</td>
                <td>是</td>
                <td>2</td>
                <td>
                  <p>订单状态 1-待支付 2-支付成功 3-支付失败 4-待退款中 5-退款成功</p>
                </td>
              </tr>
              <tr>
                <td>createTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:54:01</td>
                <td>
                  <p>创建时间</p>
                </td>
              </tr>
            </table>
          </el-collapse-item>
          <el-collapse-item title="六、退款结果通知" name="6">
            <br />
            退款结果通知是由用户提供的接口，主要是用于退款结果的通知，在创建应用时会进行配置退款异步通知地址
            <br />
            <p><b>请求说明</b></p>
            <p>请求地址：用户应用内配置</p>
            <p>请求类型：Post</p>
            <p>请求参数：json字符串</p>
            <p><b>通知参数示例</b></p>
            <table class="table_data">
              <tr style="height: 30px">
                <th style="width: 10%">参数名</th>
                <th style="width: 7%">类型</th>
                <th style="width: 7%">是否必填</th>
                <th style="width: 20%">示例</th>
                <th style="width: 56%">参数说明</th>
              </tr>
              <tr>
                <td>appid</td>
                <td>字符型</td>
                <td>是</td>
                <td>1676056269929</td>
                <td>
                  <p>应用ID</p>
                </td>
              </tr>
              <tr>
                <td>outTradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>T1234567890</td>
                <td>
                  <p>商户订单号</p>
                </td>
              </tr>
              <tr>
                <td>tradeNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>4200001754202302112022559676</td>
                <td>
                  <p>第三方订单号</p>
                </td>
              </tr>
              <tr>
                <td>refundNo</td>
                <td>字符型</td>
                <td>是</td>
                <td>50302204492023021130947235042</td>
                <td>
                  <p>第三方退款单号</p>
                </td>
              </tr>
              <tr>
                <td>goodName</td>
                <td>字符型</td>
                <td>是</td>
                <td>点券充值卡</td>
                <td>
                  <p>商品名称</p>
                </td>
              </tr>
              <tr>
                <td>payMethod</td>
                <td>字符型</td>
                <td>是</td>
                <td>1</td>
                <td>
                  <p>支付方式 1-支付宝 2-微信</p>
                </td>
              </tr>
              <tr>
                <td>price</td>
                <td>字符型</td>
                <td>是</td>
                <td>0.01</td>
                <td>
                  <p>订单价格 单位：元</p>
                </td>
              </tr>
              <tr>
                <td>transactionTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:55:01</td>
                <td>
                  <p>交易时间</p>
                </td>
              </tr>
              <tr>
                <td>refundTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:56:01</td>
                <td>
                  <p>退款时间</p>
                </td>
              </tr>
              <tr>
                <td>status</td>
                <td>整数型</td>
                <td>是</td>
                <td>2</td>
                <td>
                  <p>订单状态 1-待支付 2-支付成功 3-支付失败 4-待退款中 5-退款成功</p>
                </td>
              </tr>
              <tr>
                <td>createTime</td>
                <td>字符型</td>
                <td>是</td>
                <td>2023-02-11 20:54:01</td>
                <td>
                  <p>创建时间</p>
                </td>
              </tr>
            </table>
          </el-collapse-item>
        </el-collapse>
      </el-col>

    </el-row>



    <el-dialog
      title="消息详情"
      :visible.sync="centerDialogVisible"
      width="35%"
      center>
      <span v-html="notice.noticeContent">
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">我已知晓</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {listNotice } from "@/api/system/notice";

export default {
  name: "Index",
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      //弹窗
      centerDialogVisible:false,
      notice: {},
      //展示队列
      activeNames: ['0'],
      systemNames: ['0'],
      //公告查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        noticeTitle: undefined,
        createBy: undefined,
        status: 0
      },
      //公告列表
      noticeList:[]
    };
  },
  created() {
    //获取公告列表
    this.getList();
  },
  methods: {
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
      });
    },
    openNotice(row){
      this.notice = row;
      this.centerDialogVisible = true;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    addQqQun(){
      this.goTarget('http://chat.telfarpurse.com/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=3&groupid=2&special=4');
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .gg{
    cursor: pointer;
    font-size: 14px;
  }
  .gg:hover{
    color: #ff6060;
  }
  .text-ellipsis{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
  .content{
    width: 95%;
  }
  .ggtab{
    width: 58px;
  }
  .ggtime{
    font-size: 8px;
    color: #c4c3c3;
    width: 10%
  }
  .table_data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
  }
  .table_data th {
    border: 1px solid #999999;
    border-top: none;
    border-left: none;
    text-align: center;
  }
  .table_data td {
    border: 1px solid #999999;
    border-top: none;
    border-left: none;
    text-align: center;
  }
}
</style>

